import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Swiper, SwiperItem } from '@tarojs/components'
import { AtInput, AtIcon } from 'taro-ui'
import { post } from "../../api/fetch"
import './webnews.scss'

class WebNews extends Component {
  constructor(props) {
    super(props)
    this.state = {
      info: new Object(),
      trueHeight: 0,
      comment: '',
    }
  }
  componentWillMount() {
    const trueWidth = Taro.getSystemInfoSync().windowWidth;
    post('/getContentById', {id: this.$router.params.newsId}).then((res) => {
      let { data } = res;
      let trueHeight;
      const scale = data.width/data.height
      if(scale === 1) {
        trueHeight = trueWidth;
      }else {
        trueHeight = trueWidth * data.height / data.width;
      }
      if(res.success){
        this.setState({
          info: data,
          trueHeight,
        })
      }
    })
  }
  componentDidMount() {
  }
  config = {
    navigationBarTitleText:'笔记详情'
  }
  fetchData() {
    
  }
  render() {
    const {publisherAvatar, publisher, content, name, describe} = this.state.info
    const {trueHeight} = this.state
    let images = []
    if(content) {
      images = content.split(';')
    }
    const swiperStyle = { height: trueHeight+'px' }
    const scrollStyle = {height:Taro.getSystemInfoSync().windowHeight+'px'}
    return (
      <View className='container'>
        <ScrollView 
          className='content scrollview'
          scrollY
          scrollWithAnimation
          style={scrollStyle}
        >
        <Swiper
          style={swiperStyle}
          indicatorColor='#999'
          indicatorActiveColor='#333'
          circular
          indicatorDots
          autoplay
        >
          {
            images.map((item, index) => {
              return (
                <SwiperItem key={index}>
                  <View className='swiper-item'>
                    <Image
                      style='width: 100%;height: 100%;background: #fff;'
                      src={item}
                      mode='widthFix'
                      lazyLoad
                    />
                  </View>
                </SwiperItem>
              )
            })
          }
        </Swiper>
        <View className='info'>
          <View className='author'>
            <Image 
              className='info-avatar' 
              src={publisherAvatar} 
            />
            <Text className='info-text'>{publisher}</Text>
          </View>
          {/* <Text className='watch'>关注</Text> */}
        </View>
        <View class='content-text'>
          <Text className='title'>{name}</Text>
          <Text className='desc'>
            {describe}
          </Text>
        </View>
        {/* <View className='comment'>
          <AtInput
            className='comment-input'
            type='text'
            placeholder='说点什么呢...'
            value={this.state.comment}
            // onChange={this.handleChange.bind(this)}
          />
          <View className='op-wrap'>
            <View className='op'>
              <AtIcon className='icon-heart' value='heart' size='24'></AtIcon>
              <Text className='num'>75</Text>
            </View>
            <View className='op'>
              <AtIcon className='icon-heart' value='star' size='24'></AtIcon>
              <Text className='num'>75</Text>
            </View>
            <View className='op'>
              <AtIcon className='icon-heart' value='clock' size='24'></AtIcon>
              <Text className='num'>75</Text>
            </View>
          </View>
        </View> */}
        </ScrollView>
      </View>
    )
  }
}

export default WebNews
